<template>
    <div class="attachments">
        <!-- 面包导航 -->
        <el-breadcrumb separator="/" style="padding-left: 10px; padding-bottom: 10px; font-size: 12px">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>系统管理</el-breadcrumb-item>
            <el-breadcrumb-item>附件管理</el-breadcrumb-item>
        </el-breadcrumb>
        <!-- 图片列表部分 -->
        <el-card>
            <!-- 搜索部分 -->
            <el-form :inline="true" :model="queryMap" class="demo-form-inline" size="small">
                <el-form-item label="图片路径">
                    <el-input
                        clearable
                        @clear="search"
                        v-model="queryMap.path"
                        placeholder="输入图片路径查询"
                    ></el-input>
                </el-form-item>
                <el-form-item label="图片后缀" style="margin-left: 20px">
                    <el-select clearable @clear="search" v-model="queryMap.suffix" placeholder="请选择">
                        <el-option label="jpg/JPG" value=".jpg"></el-option>
                        <el-option label="png/PNG" value=".png"></el-option>
                        <el-option label="gif/GIF" value=".gif"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
                    <el-button type="primary" icon="el-icon-upload el-icon-right" @click="centerDialogVisible = true"
                        >上传</el-button
                    >
                </el-form-item>
            </el-form>
            <!-- 图片展示部分 -->
            <el-row :gutter="20" style="height: 430px" v-loading="loading">
                <el-col style="margin-top: 10px" v-for="image in list" :key="image.id" :span="6">
                    <div class="grid-content bg-purple">
                        <el-image
                            :alt="image.path"
                            :fit="fits"
                            :preview-src-list="srcList"
                            style="width: 200px; height: 170px"
                            :src="'http://47.97.27.205:8082/xinguanxiangmutupian/' + image.path"
                        >
                            <div slot="error" class="image-slot">
                                <i class="el-icon-picture-outline"></i>
                            </div>
                        </el-image>
                        <div>
                            <el-tag size="mini" effect="dark" type="success" style="margin-left: 50px"
                                >{{ image.width }}px X {{ image.height }}px</el-tag
                            >
                            <el-popconfirm title="这是一段内容确定删除吗？" @confirm="del(image.id)">
                                <el-button
                                    v-hasPermission="'image:delete'"
                                    style="margin-left: 30px"
                                    icon="el-icon-delete"
                                    size="mini"
                                    type="text"
                                    slot="reference"
                                    >删除</el-button
                                >
                            </el-popconfirm>
                        </div>
                    </div>
                </el-col>
            </el-row>

            <!-- 分页 -->
            <div class="pagination-contaiiner" style="margin: 20px 0; float: right">
                <el-pagination
                    style="margin-top: 30px"
                    background
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryMap.pageNum"
                    :page-sizes="[8, 20, 30, 40]"
                    :page-size="queryMap.pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                ></el-pagination>
            </div>
            <!-- 上传弹出框 -->
            <el-dialog title="上传图片附件" @close="closeUpload" :visible.sync="centerDialogVisible" width="38%" center>
                <el-upload
                    accept="image/*"
                    :auto-upload="false"
                    :multiple="true"
                    ref="upload"
                    :limit="10"
                    :on-exceed="exceed"
                    class="upload-demo"
                    drag
                    :headers="headerObject"
                    :on-success="handleUploadSuccess"
                    :action="uploadUrl"
                >
                    <i class="el-icon-upload"></i>
                    <div class="el-upload__text">
                        将文件拖到此处，或
                        <em>点击上传</em>
                    </div>
                    <div class="el-upload__tip" slot="tip">
                        只能上传jpg/png文件，且不超过500kb,最多支持10张图片一起上传
                    </div>
                </el-upload>
                <span slot="footer" class="dialog-footer">
                    <el-button @click="closeUpload">取消</el-button>
                    <el-button style="margin-left: 10px" type="success" @click="submitUpload()">上传</el-button>
                </span>
            </el-dialog>
        </el-card>
    </div>
</template>

<script>
export default {
    data() {
        return {
            //http://localhost:8082/qlpqlp/api/upload/image
            uploadUrl: "http://47.97.27.205:8081/upload/image",
            centerDialogVisible: false, //显示上传窗口
            loading: true,
            total: 0,
            fits: "contain",
            queryMap: {},
            list: [],
            srcList: [],
            headerObject: {
                Authorization: window.localStorage.getItem("JWT_TOKEN"),
            }, //图片上传请求头
        };
    },

    created() {
        this.getImageList();
        setTimeout(() => {
            this.loading = false;
        }, 500);
    },

    methods: {
        //取消上传
        closeUpload() {
            this.centerDialogVisible = false;
            this.$refs.upload.clearFiles();
        },

        //上传之后的回调
        handleUploadSuccess(response, file, fileList) {
            // console.log(response);
            if (response.code == 200) {
                this.getImageList();
                this.centerDialogVisible = false;
            } else {
                this.$refs.upload.clearFiles();
                return this.$message.error("图片上传失败!");
            }
        },

        //点击上传到服务器
        submitUpload() {
            this.$refs.upload.submit();
        },

        // 删除图片
        async del(id) {
            const { data: res } = await this.$http.delete("upload/delete/" + id);
            console.log("___:", res);
            if (res.code == 200) {
                this.$message.success("删除图片成功");
                this.getImageList();
            } else {
                return this.$message.error("删除图片失败");
            }
        },

        //加载附件列表
        async getImageList() {
            const { data: res } = await this.$http.get("upload/findImageList", { params: this.queryMap });
            // console.log(res);
            const that = this;
            if (res.code == 200) {
                this.list = res.data.list;
                this.total = res.data.total;
                this.srcList = [];
                this.list.forEach(function (item) {
                    that.srcList.push("http://47.97.27.205:8082/xinguanxiangmutupian/" + item.path);
                });
            } else {
                return this.$message.error("获取附件列表失败!");
            }
        },

        //改变页码
        handleSizeChange(newSize) {
            this.queryMap.pageSize = newSize;
            this.getImageList();
        },
        //翻页
        handleCurrentChange(current) {
            this.queryMap.pageNum = current;
            this.getImageList();
        },
        //搜索
        search() {
            this.queryMap.pageNum = 1;
            this.getImageList();
        },
        // 超出允许上传的时候
        exceed() {
            this.$message.warning("超出允许上传图片的数量");
        },
    },
};
</script>

<style lang="less">
.el-upload-dragger {
    width: 530px;
}
.el-pagination {
    display: flex;
}
</style>
